<template>
	<div class="select-common-con congestion-length content-border-bg" :class="{ 'is-expanded': expanded }">
		<div class="_flex_between_center">
			<div class="flex_start">
				<span class="left-title f16" style="width: 80px;">当前区域</span>
				<!-- <a-button type="primary" v-if="state.searchList?.length" style="margin:0 10px;" ghost @click="drawLineBySearch">所有路段</a-button> -->

				<a-select v-if="state.jdcdsList?.length" v-model:value="state.jdcdsSlc" @select="handleJdcdsSlc"
					placeholder="请选择" style="width: 100px;height: 32px;border: 1px solid #1890ff;">
					<a-select-option :value="null">所有车道</a-select-option>
					<a-select-option v-for="(item, index) in state.jdcdsList" :key="index" :value="item">
						{{ item }}车道
					</a-select-option>
				</a-select>
				<!-- <a-button type="primary" v-if="state.jdcdsList?.length" style="margin-left: 20px;" ghost @click="drawLineByJdcds">
          所有车道
        </a-button> -->
			</div>


			<el-icon class="cursor-pointer" :size="20" color="#dcdfe6" @click="close">
				<Close />
			</el-icon>
		</div>
		<!-- <el-icon
      class="cursor-pointer !absolute right-20px top-10px"
      :size="20"
      color="#dcdfe6"
      @click="close"
    >
      <Close />
    </el-icon> -->

		<!-- <small-title title="选择区域" /> -->

		<div class="flex items-center my-15px">
			<!-- <span class="text-white">选择道路：</span> -->
			<page-select v-model="radio" v-model:label="radio" class="flex-1" :data="data" value-key="roadName"
				label-key="roadName" :pagination="pagination" @change="radioInput" :slcJdcds="state.jdcdsSlc"
				@iptChange="iptChange" :placeholderColor="'#999'" @getSearchRoadList="getSearchRoadList"
				@getSearchJdcdsList="getSearchJdcdsList"></page-select>
		</div>
		<el-collapse v-model="activeNames" style="width: 100%; height: auto; border: none">
			<!-- <el-radio-group v-model="radio" @change="radioInput" class="!block">
        <el-radio
          v-for="(item, index) in data"
          class="!block"
          :key="index"
          :label="item.street || item.roadName"
        >
          {{ item.street || item.roadName }}
        </el-radio>
      </el-radio-group> -->

			<el-collapse-item :title="listArea[0]?.area" name="1">
				<div v-for="(item, index) in listArea" :key="index">
					<div style="display: flex; justify-content: space-around">
						<div class="box">
							<!-- <div class="left">
                <img src="@/assets/images/dlzcd.png" alt="" />
              </div> -->
							<div class="right">
								<p class="sub_title">道路总长度</p>
								<!-- <p class="bolder f32">{{ item.totalLength || 0 }} <span class="f18 no_bolder">km</span></p> -->
								<p class="bolder f32 text-nowrap flex_start">
									<span>{{ jisuan(filters(item.totalLength)) || 0 }}</span>
									<span class="f18 no_bolder"> km</span>
								</p>
							</div>
						</div>
						<div class="box">
							<!-- <div class="left">
                <img src="@/assets/images/lwmd.png" alt="" />
              </div> -->
							<div class="right">
								<p class="sub_title">路网密度</p>
								<p class="bolder f32 text-nowrap flex_start">
									<span>{{ filters(item.roadDensity) || 0 }}</span>
									<span class="f18 no_bolder"> km/km²</span>
								</p>
							</div>
						</div>
					</div>

					<div class="road_length_detail">
						<div class="tip_sign">{{params2.area}}-{{params2.finished}}-{{params2.roadLevel}}</div>
						<div class="detail_item flex_between" v-for="(itemVal, itemKey) in item?.roadTypeLength"
							:key="itemVal">
							<div class="colorWhite f18">{{ itemKey || '' }}</div>
							<div class="colorWhite f18">{{ jisuan(itemVal) || 0 }} km</div>
						</div>

					</div>


				</div>
				<div v-if="listArea?.length == 0">暂无数据</div>
			</el-collapse-item>

			<!-- <el-collapse-item title="道路基础指标" name="2">

				<div class="flex_between">
					<div class="item_sty">
						<div class="sub_title">道路名称</div>
						<div :class="['f24 text_overflow']">{{ listRoad?.roadName || '-' }}</div>
					</div>
					<div class="item_sty">
						<div class="sub_title">规划道路等级</div>
						<div class="f24">{{ listRoad?.ghdldj || '-' }}</div>
					</div>
					<div class="item_sty">
						<div class="sub_title">规划道路宽度</div>
						<div class="f24">{{ listRoad?.ghWidth }}m</div>
					</div>
				</div>
				<div class="flex_between">
					<div class="item_sty">
						<div class="sub_title">现状道路宽度</div>
						<div class="f24">{{ listRoad?.xzWidth }}m</div>
					</div>
					<div class="item_sty">
						<div class="sub_title">机动车道数</div>
						<div class="f24">{{ listRoad?.jdcds || '-' }}</div>
					</div>
					<div class="item_sty">
						<div class="sub_title">建设完成情况</div>
						<p v-if="listRoad?.finished == 0" class="f24">按规划形成</p>
						<p v-if="listRoad?.finished == 1" class="f24">未建</p>
						<p v-if="listRoad?.finished == 2" class="f24">规划与建设不一致</p>
						<p v-if="listRoad?.finished == 3" class="f24">在建</p>
						<p v-if="listRoad?.finished == 4" class="f24">规划外</p>
						<p v-if="listRoad?.finished == 5" class="f24">-</p>
					</div>
				</div>
				<div class="flex_between">
					<div class="item_sty">
						<div class="sub_title">非机动车道宽度</div>
						<div class="f24" v-if="['', '0', '-1'].includes(listRoad?.fjdWidth)">{{
              state.noData
            }}</div>
						<div class="f24" v-else>{{ listRoad?.fjdWidth || state.noData }}m</div>
					</div>
					<div class="item_sty">
						<div class="sub_title">人行道宽度</div>
						<div class="f24" v-if="['', '0', '-1'].includes(listRoad?.rxdWidth)">{{
              state.noData
            }}</div>
						<div class="f24" v-else>{{ listRoad?.rxdWidth || state.noData }}m</div>
					</div>
					<div class="item_sty">
						<div class="sub_title">机非分离类型</div>
						<div class="f24" v-if="['', '0', '-1'].includes(listRoad?.jffllx)">{{
              state.noData
            }}</div>
						<div class="f24" v-else>{{ listRoad?.jffllx || state.noData }}</div>
					</div>
				</div>


				<div v-if="listRoad?.length == 0">暂无数据</div>
			</el-collapse-item> -->
		</el-collapse>
	</div>
</template>
<script>
	import {
		defineComponent,
		ref,
		computed,
		shallowRef,
		watch,
		reactive,
		nextTick
	} from 'vue';
	import {
		Close
	} from '@element-plus/icons-vue';
	import smallTitle from '@/components/smallTitle/index.vue';
	import {
		getQuery,
		getRoadDetail
	} from '@/api/basic';
	import {
		useMapStore
	} from '@/store/modules/map';
	import useLocalPagination from '@/hooks/useLocalPagination';
	import PageSelect from '@/components/PageSelect/index.vue';
	import inputAngle from './inputAngle.vue';

	export default defineComponent({
		name: 'SelectCommon',
		components: {
			smallTitle,
			PageSelect,
			Close,
			inputAngle
		},
		props: {
			expanded: {
				type: Boolean,
				default: false,
			},
		},

		emit: ['update:expanded', 'getParam', 'getMapRoadListByIds', "getJdcdsMap"],
		setup(props, {
			emit
		}) {
			const mapStore = useMapStore();
			const activeNames = ref(['1']);
			const state = reactive({
				noData: '-',
				searchList: [],
				jdcdsList: [],
				jdcdsSlc: null,
			});

			const listArea = shallowRef([]); // 当前区域信息
			const params2 = shallowRef({}); // 当前区域信息
			const listRoad = shallowRef([]); // 当前道路信息
			const radioList = shallowRef([]); // 框选工具后的道路列表
			const radioListSearh = shallowRef([]); // 搜索后的道路列表
			const dialogVisible = ref(false);
			const map = computed(() => mapStore.ownMap);
			const roadBaseInfo = computed(() => mapStore.showRoadBaseInfo);
			const radio = ref('');


			watch(
				roadBaseInfo,
				() => {
					// console.log("---==>",roadBaseInfo?.value);
					listRoad.value = {};
					radio.value = roadBaseInfo?.value?.roadName;
					activeNames.value = ['1', '2'];
					listRoad.value = {
						...roadBaseInfo?.value
					};
				}, {
					deep: true,
				},
			);
			watch(
				listArea,
				() => {
					// console.log("areaInfo---->",listArea);
				}, {
					deep: true
				},
			);

			// nextTick(() => {
			//   map.value.addEventListener('zoomend', function () {
			//     console.log('zoom', map.value.getZoom());
			//     //地图缩放结束后执行的代码
			//   });
			// });
			// 获取搜索出来的道路列表
			const getSearchRoadList = (sList) => {
				// console.log("list",sList);

				state.searchList = sList
			}
			const getSearchJdcdsList = (jList) => {
				// console.log("list",jList);
				state.jdcdsList = jList

			}
			const drawLineBySearch = () => {
				// console.log("list",state.searchList);
				let idsArr = state.searchList.map(i => {
					return i.id
				})
				emit("getMapRoadListByIds", idsArr)

			}
			const drawLineByJdcds = () => {

			}
			const handleJdcdsSlc = (val) => {
				state.jdcdsSlc = val
				// console.log(11,val);
				setTimeout(() => {
					drawLineBySearch()
				}, 800);
			}

			const radioInput = (e) => {
				// console.log('e====>',e);
				const {
					id
				} = e.data;
				// return
				getRoadDetail({
					roadId: id
				}).then((res) => {
					listRoad.value = res;

					//选择道路成功后，展示道路基础指标
					activeNames.value = ['1', '2'];
					// console.log("res===...>",[res]);
					if (Object.keys(res).length) {
						// 改变中心点
						// res.forEach((e) => {
						const arr = res.coordinate.split(',');
						const conPoint = new window.BMap.Point(arr[0], arr[1]);

						map.value.centerAndZoom(conPoint, 16);
						// });
					}
				});
			};

			const iptChange = (val) => {
				// console.log("----val",val);
				// emit("getParam",val)
				emit("getMapRoadListByIds", val)
			}

			const {
				data,
				pagination
			} = useLocalPagination({
				data: computed(() => {
					// console.log("radioListSearh",radioListSearh.value);
					// console.log("radioList",radioList);
					return radioList.value.length ? radioList.value : radioListSearh.value;
				}),
			});

			const close = () => {
				emit('update:expanded', false);
			};

			return {
				dialogVisible,
				radioInput,
				activeNames,
				iptChange,
				getSearchRoadList,
				getSearchJdcdsList,
				drawLineBySearch,
				drawLineByJdcds,
				listArea,
				listRoad,
				radioList,
				radioListSearh,
				radio,
				data,
				close,
				state,
				pagination,
				handleJdcdsSlc,
				jisuan(val) {
					return parseFloat(val).toFixed(1);
				},
				filters(val) {
					const num = parseFloat(val).toFixed(1);
					return num;
				},
			};
		},
	});
</script>
<style lang="less" scoped>
	.select-common-con {
		position: absolute;
		left: 30px;
		top: 9%;
		z-index: 3;
		min-width: 25%;
		width: auto;
		height: auto;
		// min-height: 60%;
		padding: 20px;
		transition: transform 0.6s;
		transform: translateX(calc(-100% - 30px));
		background: rgba(0, 0, 0, 0.8);

		&.is-expanded {
			transform: translateX(0);
		}

		.left-title {
			color: @white-color;
		}
	}

	.box {
		width: 200px;
		height: 80px;
		// background: url(@/assets/images/组\ 67.png);
		margin-top: 10px;

		.left {
			// margin-left: 10px;
			// margin-top: 15px;
			float: left;
		}

		.right {
			// margin-top: 15px;
			// margin-left: 75px;
		}
	}

	.text-nowrap {
		overflow: hidden;
	}

	.sub_title {
		color: @color9;
	}

	.text_overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		width: 120px;
		white-space: nowrap;
		padding-left: 5px;
		// color: #18a45b;
	}

	.road_length_detail {
		padding: 24px;
		border-radius: 4px;
		background: #1a1a1a;
		position: relative;
		.tipsfun(#1a1a1a, 10px, bottom, -18px, 10%);
	}

	.item_sty {
		flex: 1;
		text-align: center;
	}

	:deep .el-collapse-item__arrow {
		display: none !important;
	}

	:deep .el-collapse-item__content {
		color: #fff;
	}

	:deep .el-collapse-item__wrap {
		background-color: transparent !important;
		border: none !important;
	}

	:deep .el-collapse-item__header {
		// padding-left: 10px;
		// padding-bottom: 12px;
		// background: url(@/assets/images/bg.png) no-repeat 0 0 / 100% 36px;
		background-color: transparent !important;
		color: #fff !important;
		border: none !important;

		&::before {
			content: '';
			// color:'#037BFF' !important;
			width: 4px;
			height: 18px;
			border-radius: 2px;
			padding-right: 8px;
			background: url(@/assets/images/bg.png) no-repeat 0 0 / 100% 100%;
		}
	}

	:deep(.page-select__input) {
		background-color: rgba(0, 0, 0, 0);
		border: 1px solid #037bff;

		&::placeholder {
			color: red;
		}
	}

	:deep .el-collapse-item__heade {
		border: none !important;
	}
</style>